<template>
	<view>
		<carHeader :title="'洗车'"></carHeader>
		<view class="top" v-for="(item,index) in storeList" :key="index">
			<image :src="item.url" class="container"></image>
						<view class="top1">
							<span style="font-size: 42rpx;">{{item.name}}</span>
							<view>
								<image v-for="(_, i) in item.score"  
				  :key="i" :src="item.scoreUrl"></image>
								<span style="margin-left: 10rpx;">{{item.score}}分</span>
							</view>
							<view class="sales">
								销量:<span>{{item.sales}}</span>
							</view>
						</view>
						
						<view class="container-right">
							营业时间:<text style="margin-left: 20rpx;" space="ensp">{{item.businessHours}}</text></br>
							位置:<span style="margin-left: 20rpx;">{{item.location}}</span>
							<image src="../../static/车联网服务-04汽车保养-03门店详情_slices/plane.png"></image>
						</view>
		</view>
		<view class="middle">
			<span style="font-size: 36rpx;font-weight: bold;">服务项目</span>
			<view class="project" v-for="(item,index) in projectList" :key="index">
				<span class="span1">{{item.projectName}}</span>
				<span class="span2">¥{{item.cuurentPrice}}</span>
				<span class="span3">¥{{item.pastPrice}}</span>
			</view>
		</view>
		<view class="buttom">
			<span style="font-size: 36rpx;font-weight: bold;">服务评价</span>
			<view class="appraise" v-for="(item,index) in appraiseList" :key="index">
				<image :src="item.avatarUrl" class="avatar"></image>
				<span class="span4">{{item.userName}}</span>
				<span class="span5">{{item.createTime}}</span>
				<view class="scoreUrl">
					<image v-for="(_, i) in item.score" :key="i" :src="item.scoreUrl" class="scoreUrl"></image>
				</view>
				<span class="span6">{{item.content}}</span>
			</view>
		</view>
		<view class="booking">
			<image src="../../static/车联网服务-04汽车保养-03门店详情_slices/矩形 10 拷贝.png"></image>
			<span>立即预约</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeList:[
					{
						name:"车百事汽车生活馆",
						score:5,
						scoreUrl:"../../static/车联网服务-03车辆维修-02附近门店_slices/五星 拷贝.png",
						sales:"556",
						url:"../../static/车联网服务-03车辆维修-02附近门店_slices/附近门店.png",
						businessHours:"周一至周五 早上8:00-晚上22:00",
						TimePeriod:"",
						location:"山阳区人民路与解放路交叉口"
					}
				],
				projectList:[
					{
						projectName:"工时价格(每小时)",
						cuurentPrice:35.9,
						pastPrice:60
					},
					{
						projectName:"轮胎",
						cuurentPrice:35.9,
						pastPrice:60
					},
					{
						projectName:"轮胎",
						cuurentPrice:35.9,
						pastPrice:60
					}
				],
				appraiseList:[
					{
						userName:"辣辣的",
						avatarUrl:"../../static/车联网服务-03车辆维修-03门店详情_slices/门店详情.png",
						createTime:"2022-12-13",
						scoreUrl:"../../static/车联网服务-03车辆维修-02附近门店_slices/五星 拷贝.png",
						content:"刷卡垃圾袋拉大凯迪拉克到啦扩大数控刀具拉开大",
						score:5
					},
					{
						userName:"辣辣的",
						avatarUrl:"../../static/车联网服务-03车辆维修-03门店详情_slices/门店详情.png",
						createTime:"2022-12-13",
						scoreUrl:"../../static/车联网服务-03车辆维修-02附近门店_slices/五星 拷贝.png",
						content:"刷卡垃圾袋拉大凯迪拉克到啦扩大数控刀具拉开大",
						score:4
					},
					{
						userName:"5555555555",
						avatarUrl:"../../static/车联网服务-03车辆维修-03门店详情_slices/门店详情.png",
						createTime:"2022-12-13",
						scoreUrl:"../../static/车联网服务-03车辆维修-02附近门店_slices/五星 拷贝.png",
						content:"刷卡垃圾袋拉大凯迪拉克到啦扩大数控刀具拉开大",
						score:4
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.top{
		width:95%;
		height:700rpx;
		background-color: white;
		position: relative;
		top:-220rpx;
		left:20rpx;
		border-radius: 30rpx;
		display: flex;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		.top1{
			width:350rpx;
			height:200rpx;
			position: absolute;
			top:440rpx;
			// display: flex;
			image{
				width:25rpx;
				height:25rpx;
				margin-right: 5rpx;
			}
			.sales{
				position: relative;
				top:-43rpx;
				left:240rpx;
			}
			.right-top{
				color: #1C81FD;
				position: relative;
				top:-120rpx;
				left:500rpx;
				font-weight: bold;
			}
		}
		.container{
			width:100%;
			height:400rpx;
			border-radius: 20rpx;
		}
		.container-right{
			flex-wrap: wrap;
			position: absolute;
			top:540rpx;
			font-size: 30rpx;
			image{
				width:30rpx;
				height:30rpx;
				position:relative;
				top:5rpx;
				left:20rpx
			}
		}
	}
	.middle{
		width:95%;
		// height:500rpx;
		background-color: white;
		position: relative;
		top:-200rpx;
		left:20rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 40rpx;
		.project{
			width:100%;
			height:80rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eeeeee;
			.span1{
				line-height: 80rpx;
				font-size: 30rpx;
			}
			.span2{
				line-height: 80rpx;
				font-size: 30rpx;
				color: red;
				position: absolute;
				left:500rpx;
			}
			.span3{
				line-height: 80rpx;
				font-size: 24rpx;
				color: #7E7E7E;
				position: absolute;
				left:600rpx;
				text-decoration: line-through;  
			}
		}
	}
	.buttom{
		width:95%;
		// height:500rpx;
		background-color: white;
		position: relative;
		top:-180rpx;
		left:20rpx;
		border-radius:30rpx ;
		box-sizing: border-box;
		padding: 40rpx;
		.appraise{
			width:100%;
			height:280rpx;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
			border-bottom: 1rpx solid #eeeeee;
			.avatar{
				width:150rpx;
				height:150rpx;
				border-radius: 50%;
			}
			.span4{
				font-size: 36rpx;
				font-weight: 500;
				font-family:"Microsoft YaHei", sans-serif;
				position: absolute;
				top:30rpx;
				left:200rpx;
			}
			.span5{
				font-size: 24rpx;
				color: #7E7E7E;
				position: absolute;
				top:30rpx;
				left:480rpx;
			}
			.scoreUrl{
				display: flex;
				position: relative;
				top:-40rpx;
				left: 90rpx;
				image{
					width:25rpx;
					height: 25rpx;
				}
			}
			.span6{
				display: inline-block;
				position: absolute;
				top:150rpx;
				left:200rpx;
				font-size: 30rpx;
			}
		}
	}
	.booking{
		width:100%;
		height:100rpx;
		background-color: white;
		position: fixed;  
		bottom: 0; /* 固定在底部 */  
		align-items: center;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		image{
			width:90%;
			height:80rpx;
		}
		span{
			font-size: 36rpx;
			color:white;
			position: absolute;
		}
	}
</style>
